<template>
  <div>
    <h2>toRefs使用</h2>
    <hr />
    <h3>{{ name }}</h3>
    <h3>{{ age }}</h3>
    <hr />
    <h3>{{ name2 }}</h3>
    <h3>{{ age2 }}</h3>
  </div>
</template>
<script lang="ts">
function userFeaturex() {
  const state = reactive({
    name2: "自来水",
    age2: 1000,
  });
  return {
    ...toRefs(state),
  };
}

import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "toRefs使用",
  setup() {
    const state = reactive({
      name: "自来水",
      age: 1000,
    });

    // 将对象中的属性也变成响应式的
    const state2 = toRefs(state);

    const { name2, age2 } = userFeaturex();

    setInterval(() => {
      state2.name.value += "===";
      name2.value += "===";
      console.log("=====");
    }, 2000);

    return {
      // ... state,
      ...state2,
      name2,
      age2,
    };
  },
});
</script>
